<template>
  <div class="app-container alarm_manage">
    <div class="alarm_manage_factor">
      <!-- <el-card class="alarm-card">
        <div slot="header" class="alarm-header">
          <el-checkbox v-model="checkeds[0]" label="瞬时流量阈值"></el-checkbox>
          <el-button style="float: right; padding: 3px 0" type="text" @click="submitChecked(0)">阈值提交</el-button>
        </div>
        <el-slider v-model="instant_flow" :format-tooltip="formatTooltip" :show-tooltip="true" show-input></el-slider>
        <div style="font-size:15px;"> 预警示例:<el-tag type="warning">采水井瞬时流量一天内变化幅度在 {{instant_flow}} m³/h 以上，当前瞬时流量59m³/h</el-tag>
        </div>
      </el-card> -->
      <el-card class="alarm-card">
        <div slot="header" class="alarm-header">
          <el-checkbox v-model="checkeds[1]" label="瞬时回灌量阈值"></el-checkbox>
          <el-button style="float: right; padding: 3px 0" type="text" @click="submitChecked(1)">阈值提交</el-button>
        </div>
        <el-slider v-model="instant_reflow" :format-tooltip="formatTooltip" :show-tooltip="true" show-input></el-slider>
        <div style="font-size:15px;"> 预警示例:<el-tag type="warning">回灌量小于抽水量的 {{instant_reflow}} %，当前瞬时回灌量 %S m³/h</el-tag>
        </div>
      </el-card>
      <!-- <el-card class="alarm-card">
        <div slot="header" class="alarm-header">
          <el-checkbox v-model="checkeds[2]" label="累计流量阈值"></el-checkbox>
          <el-button style="float: right; padding: 3px 0" type="text" @click="submitChecked(3)">阈值提交</el-button>
        </div>
        <el-slider v-model="total_flow" :format-tooltip="formatTooltip" :show-tooltip="true" show-input></el-slider>
        <div style="font-size:15px;"> 预警示例:<el-tag type="warning">采水井累计流量一天内变化幅度在 {{instant_flow}} m³/h 以上，当前累计流量59m³/h</el-tag>
        </div>
      </el-card>
      <el-card class="alarm-card">
        <div slot="header" class="alarm-header">
          <el-checkbox v-model="checkeds[3]" label="累计回灌量阈值"></el-checkbox>
          <el-button style="float: right; padding: 3px 0" type="text" @click="submitChecked(3)">阈值提交</el-button>
        </div>
        <el-slider v-model="total_reflow" :format-tooltip="formatTooltip" :show-tooltip="true" show-input></el-slider>
        <div style="font-size:15px;"> 预警示例:<el-tag type="warning">采水井累计回灌量一天内变化幅度在 {{instant_flow}} m³/h 以上，当前累计回灌量59m³/h</el-tag>
        </div>
      </el-card> -->
      <el-card class="alarm-card">
        <div slot="header" class="alarm-header">
          <el-checkbox v-model="checkeds[4]" label="水温阈值"></el-checkbox>
          <el-button style="float: right; padding: 3px 0" type="text" @click="submitChecked(4)">阈值提交</el-button>
        </div>
        <el-slider v-model="water_temperature" :format-tooltip="formatTooltip" :show-tooltip="true" show-input></el-slider>
        <div style="font-size:15px;"> 预警示例:<el-tag type="warning">采水井水温一天内变化幅度在 {{water_temperature}} ℃ 以上，当前水温 %S ℃</el-tag>
        </div>
      </el-card>
      <!--  <el-card class="alarm-card">
        <div slot="header" class="alarm-header">
          <el-checkbox v-model="checkeds[5]" label="回水温阈值"></el-checkbox>
          <el-button style="float: right; padding: 3px 0" type="text" @click="submitChecked(5)">阈值提交</el-button>
        </div>
        <el-slider v-model="water_retemperature" :format-tooltip="formatTooltip" :show-tooltip="true" show-input></el-slider>
        <div style="font-size:15px;"> 预警示例:<el-tag type="warning">采水井回水温一天内变化幅度在 {{instant_flow}} m³/h 以上，当前回水温59m³/h</el-tag>
        </div>
      </el-card> -->
      <el-card class="alarm-card">
        <div slot="header" class="alarm-header">
          <el-checkbox v-model="checkeds[6]" label="水位阈值"></el-checkbox>
          <el-button style="float: right; padding: 3px 0" type="text" @click="submitChecked(6)">阈值提交</el-button>
        </div>
        <el-slider v-model="water_level" :format-tooltip="formatTooltip" :show-tooltip="true" show-input></el-slider>
        <div style="font-size:15px;">
          预警示例:<el-tag type="warning">水位下降至设计最低动水位 {{water_level}} m，当前水位 %S m</el-tag>
        </div>
      </el-card>
      <!-- <el-card class="alarm-card">
        <div slot="header" class="alarm-header">
          <el-checkbox v-model="checkeds[7]" label="回水位阈值"></el-checkbox>
          <el-button style="float: right; padding: 3px 0" type="text" @click="submitChecked(7)">阈值提交</el-button>
        </div>
        <el-slider v-model="water_relevel" :format-tooltip="formatTooltip" :show-tooltip="true" show-input></el-slider>
        <div style="font-size:15px;"> 预警示例:<el-tag type="warning">采水井回水位一天内变化幅度在 {{instant_flow}} m³/h 以上，当前回水位59m³/h</el-tag>
        </div>
      </el-card> -->
    </div>
    <div class="alarm_sub">
      <el-button type="primary" plain @click="submitCheckeds">提交选择阈值</el-button>
    </div>
  </div>

</template>

<script>
import {
  listThreshold,
  getThreshold,
  delThreshold,
  addThreshold,
  updateThreshold,
} from "@/api/warning/alarm_manage";
export default {
  data() {
    return {
      water_relevel_Checked: false,
      instant_flow: 0,
      instant_reflow: 50,
      total_flow: 36,
      total_reflow: 48,
      water_temperature: 42,
      water_retemperature: 42,
      water_level: 42,
      water_relevel: 42,
      checkeds: [false, true, false, false, false, false, false, false],
    };
  },
  methods: {
    formatTooltip(val) {
      return val;
    },
    submitCheckeds() {
      console.log(this.checkeds);
      let checkd = this.checkeds.filter((item) => {
        return item === true;
      });
      console.log(checkd);
      this.$modal
        .confirm("是否确认提交这" + checkd.length + "个数据项？")
        .then(function () {
          console.log("取消");
        })
        .then(() => {
          this.$modal.msgSuccess("提交成功");
        })
        .catch(() => {});
    },
    submitChecked() {},
  },
};
</script>
<style lang="scss" scoped>
.alarm_manage {
  /* border: 1px solid red; */
  padding: 10px 24px;
  display: flex;
  flex-direction: column;
  .alarm_manage_factor {
    display: flex;
    justify-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 30px;
    .alarm-card {
      margin-right: 20px;
      margin-top: 40px;
      width: 45%;
      .alarm-header:before,
      .alarm-header:after {
        display: table;
        content: "";
      }
      .alarm-header:after {
        clear: both;
      }
    }
  }
  .alarm_sub {
    margin: 0 auto;
  }
}
</style>